<template>
	<div id="container"></div>
</template>
<script setup>
	import { onMounted } from 'vue'
	import { useSandboxStatusStore } from '@/store/index.js'

	const store = useSandboxStatusStore()
	async function initSandbox() {
		window.sandbox = await new GCMap.Sandbox('container', {
			fxaa: true,
			msaaSamples: 1
		})
	}
	const a = 1
	onMounted(async () => {
		await initSandbox()
		window.sandbox.setMapLayer({ type: 'arcgis' })
		store.setSandboxReady(true)
		window.sandbox.on(
			'click',
			(e) => {
				if (e.lng && e.lat) {
					console.log({
						lng: e.lng.toFixed(6) - 0,
						lat: e.lat.toFixed(6) - 0,
						alt: e.alt.toFixed(3) - 0
					})
				}
			},
			{ target: 'scene' }
		)
		document.addEventListener('keyup', (e) => {
			if (e.key === 'v') {
				console.log(window.sandbox.cameraPos)
			}
		})
	})
</script>
<style lang="scss">
	#container {
		height: 100%;
		width: 100%;
		overflow: hidden;
		.cesium-viewer-bottom,
		.cesium-viewer-animationContainer,
		.cesium-viewer-toolbar {
			display: none;
			visibility: hidden;
		}
		.cesium-viewer,
		.cesium-viewer-cesiumWidgetContainer,
		.cesium-widget {
			width: 100%;
			height: 100%;
		}
		.cesium-widget {
			> canvas {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
